<template>
  <!-- 详情 -->
  <el-dialog title="通关全流程业务流程模板详情" :visible.sync="dialogVisible" width="50%" append-to-body
    :close-on-click-modal="false" :before-close="closedialog">
    <el-descriptions :column="2" border>
      <el-descriptions-item>
        <template slot="label">
          模板代码
        </template>
        {{form.templateCode}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          模板名称
        </template>
        {{form.templateName}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          进出口类型
        </template>
        <dict-tag :options="dict.type.sys_i_e_flag" :value="form.iEFlag" />
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          通关代码
        </template>
        <dict-tag :options="dict.type.mft_biz_mode" :value="form.customsStateCode" />
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          业务类型
        </template>
        <dict-tag :options="dict.type.sys_bill_business_type" :value="form.businessType" />
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          创建人
        </template>
        {{form.createBy}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          创建时间
        </template>
        {{form.createTime}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          更新人
        </template>
        {{form.updateBy}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          更新时间
        </template>
        {{form.updateTime}}
      </el-descriptions-item>
    </el-descriptions>
    <el-table :data="stepList" style="width: 100%">
      <el-table-column prop="stepCode" label="步骤" width="180">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.mft_vehicle_work_flow" :value="scope.row.stepCode" />
        </template>
      </el-table-column>
      <el-table-column prop="sort" label="排序">
      </el-table-column>
    </el-table>

    <div slot="footer" class="dialog-footer" style="text-align: center;">
      <el-button @click="closedialog">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import {
    getMftVehicleWorkflowTemplate
  } from "@/api/billsdecl/mftVehicleWorkflowTemplate";
  export default {
    props: {
      dict: {}
    },
    data() {
      return {
        //显示详情
        dialogVisible: false,
        form: {
          id: null,
          templateCode: null,
          templateName: null,
          iEFlag: null,
          customsStateCode: null,
          businessType: null,
          createBy: null,
          createTime: null,
          updateBy: null,
          updateTime: null
        },
        stepList:[],
      }
    },
    methods: {
      open(row) {
        this.dialogVisible = true;
        this.loadDetail(row);
      },
      closedialog() {
        this.dialogVisible = false
      },
      // 获取详情
      loadDetail(row) {
        getMftVehicleWorkflowTemplate(row.id).then((res) => {
          if (res.code == 200) {
            this.form = res.data;
            this.stepList=res.data.stepsList;
          }
        });
      },
    }
  };
</script>

<style>

</style>
